<template>
  <el-descriptions
      class="margin-top"
      title="个人信息"
      :column="3"
      border
  >
    <template #extra>
      <el-button type="primary" @click="updateDialogShow = true">实名认证</el-button>
      <RouterLink to="/user/recharge">
        <el-button type="success"
                   style="margin-left: 30px"
                   v-if="!(userInfo.realname && userInfo.sex && userInfo.idCard && userInfo.phone && userInfo.email)"
                   disabled>走上人生巅峰
        </el-button>
        <el-button type="success" style="margin-left: 30px" v-else>走上人生巅峰
        </el-button>
      </RouterLink>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <user/>
          </el-icon>
          用户名
        </div>
      </template>
      {{ userInfo.username }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <iphone/>
          </el-icon>
          电话
        </div>
      </template>
      {{ userInfo.phone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <location/>
          </el-icon>
          身份证号
        </div>
      </template>
      {{ userInfo.idCard }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building/>
          </el-icon>
          真实姓名
        </div>
      </template>
      {{ userInfo.realname }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building/>
          </el-icon>
          性别
        </div>
      </template>
      {{ userInfo.sex }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building/>
          </el-icon>
          邮箱
        </div>
      </template>
      {{ userInfo.email }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building/>
          </el-icon>
          注册时间
        </div>
      </template>
      {{ userInfo.regTime }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building/>
          </el-icon>
          余额
        </div>
      </template>
      {{ userInfo.money }}元
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <tickets/>
          </el-icon>
          状态
        </div>
      </template>
      <el-tag size="small" type="danger" v-if="userInfo.status==0">未认证</el-tag>
      <el-tag size="small" type="success" v-if="userInfo.status==1">已认证</el-tag>
    </el-descriptions-item>
  </el-descriptions>
  <!--修改个人信息对话框开始-->
  <el-dialog v-model="updateDialogShow" title="修改个人信息" width="500" @update:modelValue="getInfo"
             :close-on-click-modal="false">
    <el-form>
      <div class="form-column">
        <el-form-item label="用户名" label-width="20%">
          <el-input v-model="userInfo.username" autocomplete="off" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="真实姓名" label-width="20%">
          <el-input v-model="userInfo.realname" autocomplete="off" placeholder="请输入真实姓名"/>
        </el-form-item>
        <el-form-item label="性别" label-width="20%">
          <el-radio-group v-model="userInfo.sex">
            <el-radio :value="'男'" size="large">男</el-radio>
            <el-radio :value="'女'" size="large">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证" label-width="20%">
          <el-input v-model="userInfo.idCard" autocomplete="off" placeholder="请输入身份证"/>
        </el-form-item>
        <el-form-item label="电话" label-width="20%">
          <el-input v-model="userInfo.phone" autocomplete="off" placeholder="请输入电话"/>
        </el-form-item>
        <el-form-item label="邮箱" label-width="20%">
          <el-input v-model="userInfo.email" autocomplete="off" placeholder="请输入邮箱"/>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow=false">取消</el-button>
        <el-button type="primary" @click="update">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改个人信息对话框结束-->
</template>

<script setup>
import userApi from "@/api/userApi.js";
import {useUserStore} from '@/stores/user.js';
import {ref} from "vue";
import {ElLoading, ElMessage} from "element-plus";

const userStore = useUserStore();
//个人信息
const userInfo = ref({
  username: "",
  realname: "",
  sex: "",
  idCard: "",
  phone: "",
  email: "",
  regTime: "",
  money: "",
})
//是否显示个人中心对话框
const updateDialogShow = ref(false)

//修改信息
function update() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  userApi.update(userInfo.value)
      .then(resp => {
        loading.close()
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          //弹出消息
          ElMessage.success(resp.msg)
          //隐藏
          updateDialogShow.value = false
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
        getInfo()
      })
}

//获取个人信息
function getInfo() {
  userApi.selectById(userStore.userInfo.id)
      .then(resp => {
        console.log(resp.data)
        userInfo.value = resp.data
      })
}

getInfo()
</script>

<style scoped>
.info div {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.infoBtn {
  float: right;
  margin-top: 30px;
}
</style>